
<template>
  <el-container style="height: 100vh; ">
    <el-header style="background-color: #263238;padding: 0%; margin: 0%;">
  <el-menu background-color="#263238" text-color="#fff" mode="horizontal" :ellipsis="false">
    <img src="../assets/logo.png"  style="width: 70px; height: 70px;"/>
    <el-menu-item index="0" style="padding: 0%; margin-left: 20px;">达通学后台管理系统</el-menu-item>
    <div class="flex-grow" />
    <el-sub-menu index="1">
      <template #title>{{ na }}</template>
        <el-menu-item @click="goToMain" >个人信息</el-menu-item>
        <el-menu-item @click="clearLogin">退出</el-menu-item>
    </el-sub-menu>
  </el-menu>
      </el-header>
    <el-container>
         <!-- 左边菜单栏部分 -->
         <home-aside ></home-aside>
      <el-main>
         <RouterView></RouterView>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
import HomeAside from '../components/HomeAside.vue';
import {onMounted, ref} from 'vue';
import userApi from '../api/public/public.js'
import Cookies from 'js-cookie'
let token = Cookies.get('token')
import {useRouter} from 'vue-router'
const router=useRouter()
let na=ref("");
if(token==null || token==""){
  const router=useRouter()
  router.push("/login");
}


onMounted(()=>{
  // console.log("token=1111",token);
  userApi.getAdminInfo(token).then(reponse=>{
      na.value=reponse.data.data.name;
  });
});

function  goToMain(){
  router.push("/main");
}

function clearLogin(){
  Cookies.remove('token');
  location.reload()
}
</script>
<style>
.logo-name{
  color: #fff;
  line-height: 60px;
}
.header-right{
  float: right;
}
.flex-grow {
  flex-grow: 1;
}
:deep(.el-menu--horizontal){
  border-bottom: none;
}

/* 水平时，去除底部白边。 */
.el-menu.el-menu--horizontal {
  border-bottom: 0;
}
</style>